<script lang="ts" setup>
interface Tree {
  label: string;
  children?: Tree[];
}

const handleNodeClick = (data: Tree) => {
  console.log(data);
};

const data: Tree[] = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1"
          }
        ]
      }
    ]
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1"
          }
        ]
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1"
          }
        ]
      }
    ]
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1"
          }
        ]
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1"
          }
        ]
      }
    ]
  }
];
const defaultProps = {
  children: "children",
  label: "label"
};
</script>
<template>
  <el-card>
    <el-tree
      :data="data"
      icon="Setting"
      :props="defaultProps"
      accordion
      show-checkbox
      highlight-current
      @node-click="handleNodeClick"
    />
  </el-card>
</template>
<style lang="scss" scoped>
.main-content {
  margin: 5px !important;
}
</style>
